<template lang="html">
  <div class="container">
    <div>
      <movie-index-header></movie-index-header>
    </div>
    <div class="contentMain">
      <div>
        <h1>电影名称 {{ this.movieName }}</h1>
        <div class="viewNum">下载次数：{{ this.movieNumDownload }}</div>
      </div>
      <div class="">
        <button @click="movieDownload()">点击下载</button>
      </div>
      <div>
        <img :src="this.movieImg" alt="" class="headerImg">
      </div>
      <div class="btnPosition">
        <div>
          <button @click="support()">点赞</button>
          点赞数: {{ movieNumSuppose }}
        </div>
      </div>
    </div>
    <div>
      <comment-info></comment-info>
    </div>
    <div>
      <common-foot></common-foot>
    </div>
  </div>
</template>

<script>
import CommonFoot from '../components/CommonFoot.vue'
import CommentInfo from '../components/CommentInfo.vue'
import MovieIndexHeader from '../components/MovieIndexHeader.vue'

export default {
  data() {
    return {
      movieName: '',
      movieTime: '',
      movieImg: '',
      movieNum: 0,
      movieNumSuppose: 0,
      movieNumDownload: 0
    }
  },
  methods: {
    support() {
      this.$http.post('http://localhost:3000/movie/support/' + this.$route.query.id)
          .then((result) => {
            this.movieNumSuppose = result.data.data.movieNumSuppose;
          })
          .catch((error) => {
            console.log();
            alert('点赞失败，错误信息为: ' + error);
          })
    },
    movieDownload() {
      this.$http.get('http://localhost:3000/movie/downloadUrl/' + this.$route.query.id)
          .then((result) => {
            this.movieNumDownload ++
            window.location = result.data.data;
          })
          .catch((error) => {
            alert('下载失败，错误信息为: ' + error);
          });
    }
  },
  created() {
    console.log(this.$route.query.id);
    this.$http.get('http://localhost:3000/movie-detail?id=' + this.$route.query.id)
        .then(result => {
          if (result.status === 200 && result.data.status === 0) {
            this.movieName = result.data.data.movieName;
            this.movieImg = result.data.data.movieImg;
            this.movieTime = result.data.data.movieTime;
            this.movieNum = result.data.data.movieNum;
            this.movieNumSuppose = result.data.data.movieNumSuppose;
            this.movieNumDownload = result.data.data.movieNumDownload
          } else {
            alert('获取数据失败,错误信息为:' + result.data.message);
          }
        })
        .catch((error) => {
          alert('获取数据失败, 错误信息为: ' + error);
        })
  },
  components: {
    CommonFoot,
    CommentInfo,
    MovieIndexHeader
  }
}
</script>

<style lang="css" scoped>
.headerImg {
  height: 200px;
}

.container {
  width: 100%;
  margin: 0 auto;
}

.contentMain {
  padding-top: 150px;
}

.btnPosition {
  padding-left: 48%;
}

.SupportBtn {
  border: solid 1px #000;
  width: 60px;
}

.viewNum {
  font-size: 10px;
}
</style>